<template>
	<view class="indexContainer">
		<!-- 头部搜索 -->
		<view class="hearder">
			<view class="searchContainer" @click="toSearch">
				<text class="searchIcon iconfont icon-search"></text>
				<text>{{pageData[0] && pageData[0].params.placeholder}}</text>
			</view>
		</view>
		<!-- 轮播图 -->
		<swiper class="banner" indicator-dots autoplay circular>
			<swiper-item v-for="(item,index) in indexBanner" :key="index">
				<image :src="item.imgUrl"></image>
			</swiper-item>
		</swiper>
		<!-- 导航 -->
		<view class="navContainer">
			<view class="navItem" v-for="(item,index) in indexNav" :key="index">
				<image :src="item.imgUrl"></image>
				<text>{{item.text}}</text>
			</view>
		</view>
		<!-- 店长推荐 -->
		<view class="recommendContainer">
			<!-- 推荐头部 -->
			<view class="recommendHeader">
				<text class="left">店长推荐</text>
				<view class="more">
					<text>更多</text>
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			<!-- 推荐底部 -->
			<view class="recommendBottom">
				<image class="bigImage" :src="bigImage"></image>
				<view class="recommendGoods">
					<image :src="item.imgUrl" v-for="(item,index) in recommendGoods" :key="index"></image>
				</view>
			</view>
		</view>
		<!-- 周年庆大图 -->
		<image class="celebrateImage" :src="celebrateImage"></image>
		<!-- 推荐热卖 -->
		<view class="hotContainer">
			<view class="hotTitle">热卖推荐</view>
			<view class="hotImage">
				<view class="hotHeader">
					<image :src="hotImage.bigImg"></image>
				</view>
				<view class="hotBottom">
					<image :src="hotImage.leftImg" mode=""></image>
					<image :src="hotImage.rightImg" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 居家首选 -->
		<view class="choiceContainer">
			<view class="choiceTitle">- 居家首选 -</view>
			<view class="choiceWrap">
				<view class="choiceItem" v-for="item in firstChoice" :key="item.goods_id" @click="toDetailPage(item.goods_id)">
					<image :src="item.goods_image"></image>
					<text class="choiceItemText">{{item.goods_name}}</text>
					<text class="choiceItemPrice">￥{{item.goods_price_max}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				title: 'Hello',
				pageData:[], //轮播图数据
			}
		},
		onLoad() {

		},
		methods: {
			// 获取首页数据
			async getIndexData(){
				// 获取轮播图数据
				const pageData = await request('page/detail&pageId=0')
				if(pageData.status === 200){
					this.pageData = pageData.data.pageData.items
				}
			},
			// 去搜索
			toSearch(){
				uni.navigateTo({
					url:'/pages/indexSearch/indexSearch'
				})
			},
			// 去商品详情页
			toDetailPage(id){
				uni.navigateTo({
					url:'/pages/goodsDetail/goodsDetail?goodsId=' + id
				})
			}
		},
		mounted(){
			// 获取首页的数据
			this.getIndexData()
		},
		computed:{
			// 店长推荐大图
			bigImage(){
				return this.pageData[5] && this.pageData[5].data[0].imgUrl
			},
			// 店长推荐 recommendGoods
			recommendGoods(){
				const recommendData = this.pageData[5] && this.pageData[5].data.slice(1)
				return recommendData
			},
			// 热卖推荐大图
			hotImage(){
				const bigImg = this.pageData[8] && this.pageData[8].data[0].imgUrl
				const leftImg = this.pageData[8] && this.pageData[8].data[1].imgUrl
				const rightImg = this.pageData[8] && this.pageData[8].data[2].imgUrl
				return {bigImg, leftImg, rightImg}
			},
			// 轮播
			indexBanner(){
				return this.pageData[2] && this.pageData[2].data
			},
			// 导航
			indexNav(){
				return this.pageData[3] && this.pageData[3].data
			},
			// 庆祝大图
			celebrateImage(){
				return this.pageData[6] && this.pageData[6].data[0].imgUrl
			},
			// 居家首选
			firstChoice(){
				return this.pageData[10] && this.pageData[10].data
			}
		}
	}
</script>

<style lang="stylus">
.indexContainer
	.hearder
		height 60upx
		background: #f1f1f2;
		padding: 20rpx 20rpx;
		font-size: 26rpx;
		.searchContainer
			background-color #fff
			border-radius 30upx
			height 60rpx
			line-height 60rpx
			color #999
			padding 0 20rpx
			.searchIcon
				margin-right 8upx
	.banner
		width 100%
		height 370upx
		image
			width 100%
	.navContainer
		height 200upx
		display flex
		.navItem
			display flex
			flex-direction column
			align-items center
			justify-content center
			flex 1
			image
				width 90upx
				height 90upx
				margin-bottom 10upx
				border-radius 20upx
			text
				font-size 28upx
				color #666666
	.recommendContainer
		padding 10upx 30upx
		.recommendHeader
			display flex
			justify-content space-between
			.left
				font-size 36upx
				letter-spacing 3upx
			.more
				text
					font-size 28upx
					color #a4a4a4
					vertical-align middle
					margin-right 10upx
					&.iconfont
						padding 6upx
						border 1px solid #a4a4a4
						border-radius 50%
						font-size 14upx
						vertical-align middle
		.recommendBottom
			margin-top 20upx
			.bigImage
				width 100%
				height 240upx
			.recommendGoods
				margin-top 10upx
				display flex
				image
					width 240upx
					height 240upx
					flex 1
					margin-left 10upx
					&:first-child
						margin-left 0
	.celebrateImage
		height 330upx
		width 100%
		margin 35upx 0
	.hotContainer
		padding 10upx 30upx
		.hotTitle
			font-size 36upx
			letter-spacing 3upx
			margin-bottom 20upx
		.hotImage
			.hotHeader
				image
					width 100%
					height 240upx
			.hotBottom
				margin-top 10upx
				display flex
				image
					flex 1
					height 240upx
					&:first-child
						margin-right 15upx
	.choiceContainer
		.choiceTitle
			padding 60upx 0
			font-size 36upx
			letter-spacing 3upx
			text-align center
		.choiceWrap
			background-color #f8f8f8
			display flex
			flex-wrap wrap
			.choiceItem
				width 50%
				height: 550upx
				display flex
				flex-direction column
				image
					height 100%
					width 100%
				.choiceItemText
					font-size 28upx
					margin 20upx 0 0
					color #484848
					overflow hidden
					text-overflow ellipsis
					display -webkit-box
					-webkit-box-orient vertical
					-webkit-line-clamp 2
					font-size 30upx
				.choiceItemPrice
					color #fa2209
					font-size 36upx
					letter-spacing 2upx
					margin 10upx 0 
</style>
